import React from 'react';
import './MoveHistory.css';

const pieceEmoji = {
  ELEPHANT: '🐘',
  LION: '🦁',
  TIGER: '🐯',
  LEOPARD: '🐆',
  WOLF: '🐺',
  DOG: '🐕',
  CAT: '🐱',
  RAT: '🐭',
};

export default function MoveHistory({ history, step }) {
  return (
    <div className="move-history">
      <h3>移动历史</h3>
      <ol>
        {history.map((h, i) => (
          h.move && (
            <li key={i} className={i === step ? 'current' : ''}>
              <span className={h.move.piece.owner === 0 ? 'p0' : 'p1'}>
                {h.move.piece.owner === 0 ? '①' : '②'}{pieceEmoji[h.move.piece.type]}
              </span>
              {` ${h.move.from.x},${h.move.from.y} → ${h.move.to.x},${h.move.to.y}`}
              {h.move.capture && <span className="capture"> × {pieceEmoji[h.move.captured.type]}</span>}
            </li>
          )
        ))}
      </ol>
    </div>
  );
} 